<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<scroll-view scroll-x class="nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==tabIndex?'text-blue cur':''" v-for="(tab,index) in tabBars" :key="tab.id"
				 @tap="ontabtap" :data-id="index">
					{{tab.name}}
				</view>
			</view>
		</scroll-view>
		<view class="cu-list menu-avatar">
			<view :data-id="item.facewhitelist.id" class="cu-item" @click="goPersonDetail" v-for="(item,index) in attendanceList[tabIndex].data" v-bind:key="index">
				<view class="cu-avatar round lg" :style="'background-image:url('+($constant.IMG_VERSION == $constant.OSS?item.facewhitelist.personphoto:$constant.BASEURL+item.facewhitelist.personphoto)+');'"></view>
				<view class="content">
					<view class="text-grey">{{item.facewhitelist.personname}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<!-- <text class="cuIcon-infofill  margin-right-xs"></text> -->
							{{item.facewhitelist.depart.departname}}
						</view>
					</view>
				</view>
				<view class="row">
					<view :class="lable.color" v-for="(lable,index2) in getLableList(item)" :key="index2" class="cu-tag round light margin-right-xs">{{lable.name}}</view>
				</view>
			</view>
		</view>
		<no-more :show="!attendanceList[tabIndex].data.length>0" text="还没有打卡记录哦"></no-more>
		<uni-load-more :status="attendanceList[tabIndex].status" :size="20" :content-text="attendanceList[tabIndex].contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	let _self = null
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				attendanceList: [],
				tabIndex: 0,
				unitno:'',
				date: '',
				title:'打卡明细',
				tabBars: [{
					name: '已打卡',
					id: 'yidaka'
				}, {
					name: '应到但未打卡',
					id: 'wedaka'
				}]
			}
		},
		onLoad(options) {
			_self = this
			if (typeof(options.date) != 'undefined') {
				_self.date = options.date
				_self.title = options.date
				_self.tabBars.forEach((tabBar) => {
					_self.attendanceList.push({
						data: [],
						reload: true,
						page: 1,
						rows: 10,
						status: 'more',
						contentText: {
							// contentdown: '上拉加载更多',
							contentrefresh: '加载中',
						}
					});
				});
				if(typeof(options.unitno)!='undefined'){
					_self.unitno = options.unitno
					_self.title =' ' + options.departname
				}else{
					_self.unitno = getApp().globalData.orgcode
				}
				// _self.date = '2019-12-26'
				_self.getList()
			}
		},
		onReachBottom() {
			if (_self.attendanceList[_self.tabIndex].status == 'noMore') return
			_self.attendanceList[_self.tabIndex].status = 'loading';
			_self.getList()
		},
		methods: {
			ontabtap(e) {
				let index = e.currentTarget.dataset.id;
				_self.switchTab(index);
			},
			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			switchTab(index) {
				_self.tabIndex = index;
				if (_self.attendanceList[index].page == 1) {
					this.getList()
				}
			},
			getLableList(item) {
				//出勤状态
				let lables = []
				if (item.late != 0) {
					lables.push({
						name: '迟到',
						color: 'bg-orange'
					})
				}
				if (item.stime == null || item.absenteeism != 0) {
					lables.push({
						name: '旷工',
						color: 'bg-red'
					})
				}
				if (item.leaveearly != 0) {
					lables.push({
						name: '早退',
						color: 'bg-orange'
					})
				}
				if (item.leavhourss != 0) {
					lables.push({
						name: '请假',
						color: 'bg-cyan'
					})
				}
				return lables
			},
			getList() {
				if (_self.attendanceList[_self.tabIndex].reload) {
					uni.showLoading({
						title: '加载中'
					})
				}
				console.log(_self.unitno);
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.GET_ATTENDANCE_DATA_DAY,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno:_self.unitno,
						createDate: _self.date,
						page: _self.attendanceList[_self.tabIndex].page,
						rows: _self.attendanceList[_self.tabIndex].rows,
						isclock: _self.tabIndex
					},
					success: function(res) {
						let page = res.data.data
						if(typeof(page)=='undefined') return
						console.log(res.data)
						if (page.page * page.rows >= page.total) {
							_self.attendanceList[_self.tabIndex].status = 'noMore';
						}
						console.log(res.data.code)
						if (res.data.code == 0) {
							let list = page.results
							_self.attendanceList[_self.tabIndex].data = _self.attendanceList[_self.tabIndex].reload ? list : _self.attendanceList[
								_self.tabIndex].data.concat(list)
							_self.attendanceList[_self.tabIndex].page++;
							_self.attendanceList[_self.tabIndex].reload = false;
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false
							})
						}
					},
					complete() {
						uni.hideLoading()
					},
					fail: () => {
						uni.showToast({
							title: "网络错误",
							icon: 'none'
						})
					},
				});
			},
			goPersonDetail(e){
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'../attendance-person-detail/attendance-person-detail?id='+id+'&date='+_self.date
				})
			}
		}
	}
</script>

<style>
	.row {
		display: flex;
		flex-direction: row;
	}
</style>
